<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历04</title>
    <style>
        body {
            width:750px;
            background-color: pink;
            margin:0 auto;
        }

        .aside_left {
            line-height: 30px;
            background-color: #eeeeee;
            width: 100%;
            padding: 5px;
           
            
        }

        .centerM {
            
           display: flex;
         
        }

        .img_pho {
            border-radius: 50%;
            width: 50%;
            margin: 40px 70px;
        }

        .rightSide {

            width: 100%;
            padding: 10px;
            line-height: 22px;
            background-color: #fff;
            
        }

        #name {
            text-align: center;
            margin-left: 150px;
           
        }

        .workObj {
            text-align: center;
            margin: 50px;
            font: 0.75em sans-serif;
            color: grey;
        }

        ul {
            padding: 0px;

        }

        ul li {
            list-style: none;
            list-style-image: url(star.png);
        }

        ol {
            padding: 0px;
        }

        dt {
            font-weight: bold;
        }

        .rightSide p {
            font-weight: bold;
        }

        a {
            text-decoration: none;
        }

        .sofeware{
            margin-top: 30px;
            margin-bottom: 23px;
        }
        
    </style>
</head>

<body>
    <div class="centerM">
        <div class="aside_left ">
            <div>
                <img src="个人照片.jpg" alt="个人照片" class="img_pho">
                <!-- <h4 class="name">黄海婷</h4> -->
                <button id="name">黄海婷</button>
                <p class="workObj">求职意向/前端工程师</p>
            </div>
            <!-- 简单介绍个人信息 -->
            <div>
                <dt>个人信息</dt>
                <dd>
                    <ul>
                        <li> 邮箱：
                            <a href="#">huang_haiting@qq.com</a>
                        </li>
                        <li>手机：18912345679</li>
                        <li>住址：广州番禺</li>
                        <li>年龄：25</li>
                    </ul>
                </dd>
            </div>
            <div>
                <dt>
                    自我认知
                </dt>
                <dd>
                    <ol>
                        <li>熟悉 CSS3 、HTML5、 jQuery、VUE、Bootstrap 、小程序开发及 PS 切图技术 </li>
                        <li>熟悉 JavaScript 语言核心技术 DOM、Ajax、JSON 等 </li>
                        <li>对各主流浏览器间的兼容性问题有了解</li>
                        <li>对前后端交互有一定经验</li>
                        <li>有使用版本管理工具 git 经验</li>
                        <li>熟悉 jQuery Mobile 的应用 </li>
                    </ol>
                </dd>
            </div>
            <div class="sofeware">
                <dt>软件技能</dt>
                <dd>html5 熟练</dd>
                <dd>css 良好</dd>
                <dd>JavaScript 良好</dd>
                <dd>jQuery 良好</dd>
                <dd>bootstrap 良好</dd>
                <dd>vue 了解</dd>
                <dd>photoshop 了解</dd>
            </div>
        </div>

        <div class="rightSide">
            <dt>项目经验</dt>
            <dd>
                <h5>2018/4-至今
                    <span>小程序商城应用</span>
                </h5>
                <p>项目描述：</p>
                <span>基于微信开发者工具实现商城商品展示及购物车等功能。</span>
                <p>项目收获：</p>
                <ul>
                    <li>熟悉了 mustache 语法</li>
                    <li>熟悉了微信小程序开发文档 </li>
                    <li>处理小程序商品详情页面跳转问题</li>
                    <li>实现商品规格选择及数量累加并绑定购物车角标的动态效果</li>
                    <li>解决使用远程调试和预览打包小程序代码文件过大问题 </li>
                </ul>


            </dd>
            <dd>
                <h5>2018/3-2018/3
                    <span>列车时刻查询（Web App）</span>
                </h5>
                <p>项目描述：</p>
                <span>该项目可通过发车站、终点站或车次编号查询火车、高铁、动车时刻列表，以及可根据查询出的列表展示具体的发车时间、到达时间与站点名称。主要使用 HTML5，CCS，JavaScript 基于 HTML5 Plus 开发，能实现手机原生能力的调用，可打包成
                    Andro id、IOS 应用，实现一套代码兼容各平台。</span>
                <p>技术实现：</p>
                <ul>
                    <li>使用 html、css3 以及 mui 框架组件对页面原型进行布局搭建 </li>
                    <li>使用 mui 框架、JavaScript 及 Ajax 技术完成搜索数据及页面数据呈现的功能</li>
                    <li>页面切换使用 mui 窗口管理，将最耗性能的部分交给原生实现 </li>
                    <li>处理 xml 数据</li>
                </ul>
                <p>项目收获：</p>
                <ul>
                    <li>熟悉 mui 框架</li>
                    <li>熟悉对原生 JavaScript 的使用 </li>
                    <li>掌握 xml 数据调用</li>
                    <li>对 APP 项目的前端流程有了一定的认识，为以后的项目积累了一些的经验 </li>
                    <li>另外使用 jQuery Mobile 重新实现该项目，并与之进行对比： ① mui可轻松解决跨域问题，jQuery Mobile 需要架设一个代理服务器。 ② mui 页面切换流畅，jQuery Mobile
                        需要为其等待数据添加 loading，以避免影响用户感知。 ③ jQuery Mobile 使用 jQuery 框架，简化了原生的 JavaScript。 ④ mui可打包成 Android、IOS
                        应用。
                    </li>
                </ul>


            </dd>
        </div>
    </div>
    <script>
    document.getElementById("name").onclick=function(){
        alert("hello!我是黄海婷！请大家多多指教");
    }
    </script>
</body>

</html>